<template>
	<view class="columnbox wdh-100 content">
		<view class="wdh-100 rowbox jus station-box">
			<image :src="img" mode="aspectFill" class="station-img"></image>
			<view class="columnbox als">
				<view class="s-name">{{name}}</view>
				<view class="s-address">{{address}}</view>
			</view>
		</view>
		<view class="rowbox wdh-100 jus top-box">
			选择工位
			<!-- {{doorInfo.doorName}} -->
		</view>
		<view class="gw-list">
			<view @click="doorInfo=item" :class="{'sel-gw':item.doorId==doorInfo.doorId}"
				v-for="(item,index) in infolist" :key='index'>
				{{item.doorName}}
			</view>
		</view>
		<view class="rowbox wdh-100 spb delet-box">
			<view>删除原因</view>
			<picker @change="()=>{
                delType=$event.detail.value
            }" :range="delTypeList" range-key="title">
				<view class="rowbox">
					{{delTypeList[delType].title}}
					<view style="margin-left: 20rpx;"> <u-icon name="arrow-down" size="24rpx"></u-icon></view>
				</view>
			</picker>
		</view>
		<view class="columnbox wdh-100 als delet-box">
			<view>删除说明</view>
			<textarea v-model="illustrate" placeholder="请输入" class="wdh-100"
				style="font-size: 28rpx;margin-top: 20rpx;border: #cdcdcd solid 1px;  "></textarea>
		</view>
		<view class="small-btn one-btn" @click="submitInfo">提交删除</view>
	</view>
</template>

<script>
	import {
		methods
	} from '../../uni_modules/uview-ui/libs/mixin/mixin';
	export default {
		data() {
			return {
				id: '',
				img: '',
				name: '',
				address: '',
				infolist: [],
				// curgw: 0,
				delType: 0,
				delTypeList: [{
						title: '设备损坏',
						value: 0
					},
					{
						title: '无理由',
						value: 1
					}
				],
				submitflag: false,
				illustrate: '',
				doorInfo: ''
			};
		},
		onLoad(options) {
			console.log(options)
			if (options.id) {
				this.id = options.id
				this.img = options.img
				this.name = options.name
				this.address = options.address
				this.getList()

			}
			if (options.doorInfo) {
				this.doorInfo = JSON.parse(options.doorInfo)
				// this.getGw()
			}
		},
		methods: {
			getGw() {
				let id = this.id
				this.$req.get(`/xcx/stationDoorVerify/${id}`).then(res => {

				})
			},
			getUserInfo() {
				this.$req.get('/xcx/user/getInfo').then(res => {
					uni.hideLoading()
					uni.setStorageSync('userInfo', res.data.data)
					this.$store.dispatch('actionsHandleUserInfoChange', res
						.data.data);
				})
			},
			submitInfo() {
				if (!this.submitflag) {
					this.getUserInfo()
					this.submitflag = true
					uni.showLoading({
						title: '正在提交'
					})
					this.$req.post('/xcx/stationDoorVerify', {
						// 'doorId': this.infolist[this.curgw].doorId,
						doorId: this.doorInfo.doorId,
						doorName: this.doorInfo.doorName,
						doorType: this.doorInfo.doorType,
						opesType: this.doorInfo.opesType,
						verifyType: 0,
						stationId: this.id,
						delType: this.delType,
						illustrate: this.illustrate
					}).then(res => {
						uni.hideLoading()
						this.submitflag = false
						if (res.data.code == 200) {
							uni.showModal({
								title: '提交申请成功',
								content: '请等待审核',
								success: () => {
									uni.navigateBack()
								}
							})
						} else {
							uni.showModal({
								title: res.data.msg,
								success: () => {}
							})
						}
					})
				}
			},
			getList() {
				this.$req.get('/xcx/manager/stationDoor/list', {
					pageSize: 50,
					pageNum: 1,
					stationId: this.id
				}).then(res => {
					this.infolist = res.data.rows
					if (this.doorInfo == '') {
						this.doorInfo = res.data.rows[0]
					}
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
	}

	.one-info {
		width: 710rpx;
		padding: 32rpx 20rpx;
		border-bottom: #eef0f7 solid 1px;
		font-size: 28rpx;

		input {
			text-align: right;
			font-size: 28rpx;
		}
	}

	.right-box {
		width: 500rpx;
	}

	.img-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.add-img {
		width: 120rpx;
		height: 120rpx;
		border: #c9ccd4 solid 1px;
		border-radius: 10rpx;
		margin-right: 20rpx;
		position: relative;
		margin-bottom: 10rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}

		.delet-box {
			position: absolute;
			right: 0;
			top: 0;
			background: rgba(#fff, .7);
			border-radius: 100rpx;
		}
	}

	.top-box {
		margin-top: 20rpx;
		padding: 20rpx 32rpx;
		font-size: 32rpx;
		border-top: #eef0f7 solid 20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}

	.one-btn {
		width: 710rpx;
		height: 90rpx;
		border-radius: 20rpx;
		margin: 40rpx 0;
	}

	.station-box {
		padding: 20rpx 20rpx;

		.station-img {
			width: 200rpx;
			height: 150rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}

		.s-name {
			font-size: 32rpx;
			font-weight: bold;
		}

		.s-address {
			font-size: 28rpx;
			color: #7a7a7a;
			margin-top: 20rpx;
		}
	}

	.gw-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 20rpx;
		border-bottom: #eef0f7 solid 20rpx;
		width: 100%;

		view {
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			font-size: 28rpx;
			margin-left: 40rpx;
			line-height: 40rpx;
			border: #c9ccd4 solid 1px;
			margin-bottom: 20rpx;
		}

		.sel-gw {
			background: #17698F;
			color: #fff;
		}
	}

	.delet-box {
		padding: 20rpx 20rpx;
		font-size: 28rpx;
	}
</style>